<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 操作</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            // 内部插入节点(插入子节点)
            $("#append").click(function () {
                $("#div1").append($("span"))
            });
            // 外部插入节点(插入兄弟节点)
            $("#after").click(function () {
                $("#div2").after($("#div1"))
            });
            // 删除节点
            $("#empty").click(function () {
                $("#ul").empty($("#li"))
            });
            var $btn;
            $("#remove").click(function () {
                $btn = $("#btn").remove()
            });

            $("#resume").click(function () {
                $("#ul").after($btn)
            });


        })

    </script>
</head>
<body>
<span style="background-color : blue;color: red;" id="span">SPAN</span>
<div id="div1" style="background-color: gray;">DIV1</div>
<div id="div2" style="background-color: green;">DIV2</div>
<ul id="ul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<input id="btn" type="button" value="删除我"/>
<form>
    <fieldset>
        <legend>内部插入节点(插入子节点)</legend>
        <input type="button" value="append" id="append"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>外部插入节点(插入兄弟节点)</legend>
        <input type="button" value="after" id="after"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>删除节点</legend>
        <input type="button" value="删除所有子节点" id="empty"/>
        <input type="button" value="删除节点" id="remove"/>
        <input type="button" value="恢复节点" id="resume"/>
    </fieldset>
</form>

</body>
</html>